let mask = document.querySelector(".mask");
let smallBox = document.querySelector(".smallBox");
let smallBoxImg = smallBox.querySelector('img');
let box = document.querySelector(".box");
let bigBox = document.querySelector(".bigBox");
let bigBoxImg = bigBox.querySelector("img");
let imgs = document.querySelector('.imgs');
let imgli=document.querySelectorAll('.imgs>li')


// 鼠标移动
smallBox.addEventListener("mousemove", function (e) {
  // pageX、clientX
  // 当前页面坐标pageX - 盒子box左偏移值 - 遮罩层的一半
  let moveX = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
  let moveY = e.pageY - box.offsetTop - mask.offsetHeight / 2;

  let maxX = smallBox.offsetWidth - mask.offsetWidth;
  let maxY = smallBox.offsetHeight - mask.offsetHeight;

  // 左边的最大移动距离
  (moveX <= 0) && (moveX = 0);

  // 上边的最大移动距离
  (moveY <= 0) && (moveY = 0);

  // 右边的最大移动距离
  (moveX >= maxX) && (moveX = maxX);

  // 下边的最大移动距离
  (moveY >= maxY) && (moveY = maxY);

  // 遮罩层移动
  mask.style.transform = `translate(${moveX}px, ${moveY}px)`;

  // 求大图的移动比例和遮罩层的移动比例
  // mask横向移动最大距离 / mask的移动距离
  // =
  // 大图横向移动最大距离 / 需要求的值(大图的移动距离)


  // 需要求的值(大图的移动距离) = mask的移动距离 * 大图横向移动最大距离 / mask横向移动最大距离

  let bigImgX = moveX * (bigBoxImg.offsetWidth - bigBox.offsetWidth) / maxX;
  let bigImgY = moveY * (bigBoxImg.offsetHeight - bigBox.offsetHeight) / maxY;

  // 大图移动
  bigBoxImg.style.transform = `translate(${-bigImgX}px, ${-bigImgY}px)`;
});

imgs.addEventListener('mousemove', function (e) {
  
 for(let i=0;i<imgli.length;i++){
  imgli[i].classList.add('noactive')
 
 }
if(e.target.nodeName=='LI'){
  e.target.classList.remove('noactive');
  e.target.classList.add('acive');
}
   (e.target.src!=undefined)&&(bigBoxImg.src=smallBoxImg.src=e.target.src);
   console.log(e.target);
   
})
